<template>
	<view>
		<view class="container" v-if="total.all &&  total.all > 0 ">
			<!-- 顶部选项卡 -->
			<view class="swiper-tab dis-flex box-align-center flex-y-center">
				<view class="swiper-tab-item" :class="options.scoreType == -1 ? 'on' : ''" data-current="-1" @tap="swichNav">全部 ({{ total.all }})</view>
				<view class="swiper-tab-item" :class="options.scoreType == 10 ? 'on' : ''" data-current="10" @tap="swichNav">好评 ({{ total.praise }})</view>
				<view class="swiper-tab-item" :class="options.scoreType == 20 ? 'on' : ''" data-current="20" @tap="swichNav">中评 ({{ total.review }})</view>
				<view class="swiper-tab-item" :class="options.scoreType == 30 ? 'on' : ''" data-current="30" @tap="swichNav">差评 ({{ total.negative }})</view>
			</view>

			<!-- 评价列表 -->
			<scroll-view scroll-y=" true " @scrolltolower="bindDownLoad" :style="[{height: Height}]">
				<view class="comment-list" v-if=" list.data.length ">
					<view class="comment-item" v-for="(item,indexss) in list.data " :key="indexss">
						<view class="goods-comment-box dis-flex flex-dir-column b-f b-b">
							<view class="row dis-flex flex-y-center">
								<!-- 用户信息 -->
								<view class="user dis-flex flex-y-center">
									<image class="user_avatar" mode="aspectFill" :src="item.user.avatarUrl"></image>
									<text class="user_name f-26">{{ item.user.nickName }}</text>
								</view>
								<!-- 评价评星 -->
								<view class="com_xing dis-flex flex-y-center">
									<text class="iconfont icon-shoucang active"></text>
									<block v-if="item.score < 30 ">
										<text class="iconfont icon-shoucang active"></text>
										<text class="iconfont icon-shoucang active"></text>
									</block>
									<block v-if="item.score < 20 ">
										<text class="iconfont icon-shoucang active"></text>
										<text class="iconfont icon-shoucang active"></text>
									</block>
								</view>
								<!-- 评价日期-->
								<view class="flex-box f-22 col-9 t-r">{{ item.create_time }}</view>
							</view>
							<!-- 评价内容 -->
							<view class="goods-comment-cont row m-top20">
								<text class="f-26">{{ item.content }}</text>
							</view>
							<!-- 评价图片 -->
							<view class="comment-images row" v-if="item.image.length">
								<view class="image-preview" v-for="(item,index) in item.image" :v-for-item="image" :v-for-index="imgIndex" :key="index">
									<image :data-comment-index="index" :data-img-index="imgIndex" @tap="previewImages" mode="aspectFill"
									 :src="image.file_path"></image>
								</view>
							</view>
							<!-- 商品规格 -->
							<view class="row f-24 col-9">{{ item.order_goods.goods_attr }}</view>
						</view>
					</view>
				</view>
				<view class="yoshop-notcont" v-elif="notcont">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂时没有记录哦</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			Height() {
				return uni.upx2px(this.swiperHeight * 2) + 'px';
			}
		},
		data() {
			return {
				// 当前tab
				// currentTab: -1,

				// 列表高度
				swiperHeight: 0,

				// 页面参数
				options: {
					goods_id: null,
					scoreType: -1
				},

				// 评论列表
				list: [],

				// 当前页码
				page: 1,

				// show
				notcont: false,
				total:null,
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;

			// 设置swiper的高度
			this.setSwiperHeight();

			// 记录页面参数
			_this.setData({
				'options.goods_id': options.goods_id
			});
		    _this.getCommentList();
		},
		methods: {
			/**
			 * 设置swiper的高度
			 */
			setSwiperHeight: function() {
				// 获取系统信息(拿到屏幕宽度)
				let systemInfo = uni.getSystemInfoSync(),
					upx = systemInfo.windowWidth / 750, // 计算upx
					tapHeight = Math.floor(upx * 80) + 1, // tap高度
					swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
				this.setData({
					swiperHeight
				});
			},

			/**
			 * 获取评论列表
			 */
			getCommentList: function(isNextPage, page) {
				let _this = this;
				let params = _this.options;
				params.page = page || 1;
				_this._get('sharing.comment/lists', params, function(result) {
					let resultList = result.data.list,
						dataList = _this.list;
					if (isNextPage !== true || typeof dataList.data === 'undefined') {
						_this.setData({
							list: resultList,
							total: result.data.total,
							notcont: !resultList.length
						});
					} else {
						_this.setData({
							'list.data': dataList.data.concat(resultList.data),
							total: result.data.total
						});
					}
				});
			},

			/** 
			 * 点击tab切换 
			 */
			swichNav: function(e) {
				let _this = this;
				_this.setData({
					list: {},
					page: 1,
					no_more: false,
					'options.scoreType': e.target.dataset.current
				});
				// 获取评论列表
				_this.getCommentList();
			},

			/**
			 * 图片预览
			 */
			previewImages: function(e) {
				let commentIndex = e.target.dataset.commentIndex,
					imgIndex = e.target.dataset.imgIndex,
					images = this.list.data[commentIndex].image,
					imageUrls = [];
				images.forEach(function(item) {
					imageUrls.push(item.file_path);
				});
				uni.previewImage({
					current: imageUrls[imgIndex],
					urls: imageUrls
				})
			},

			/**
			 * 下拉到底加载数据
			 */
			bindDownLoad: function() {
				// 已经是最后一页
				if (this.page >= this.list.last_page) {
					this.setData({
						no_more: true
					});
					return false;
				}
				this.getCommentList(true, ++this.page);
			},

		}
	}
</script>

<style>
	/* 选项卡 */

	.swiper-tab {
		width: 100%;
		text-align: center;
		height: 80upx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.swiper-tab .swiper-tab-item {
		width: 25%;
		height: 100%;
		font-size: 28upx;
		color: #777;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 2px solid #ffffff00;
	}

	.swiper-tab .on {
		color: #f74c45;
		border-bottom: 2px solid #f74c45;
	}

	/* 设置scroll-view容器高度 */

	.comment-list,
	.yoshop-notcont {
		height: 100.1%;
	}

	/* 评论列表 */

	.goods-comment-box {
		padding: 30upx;
		box-sizing: border-box;
	}

	.goods-comment-box .row {
		width: 100%;
	}

	.goods-comment-box .user .user_avatar {
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
		margin-right: 15upx;
	}

	.goods-comment-box .comment-images {
		width: 100%;
		margin-top: 20upx;
	}

	.goods-comment-box .comment-images::after {
		clear: both;
		content: " ";
		display: table;
	}

	.goods-comment-box .comment-images .image-preview {
		float: left;
		margin-bottom: 15upx;
		margin-right: 15upx;
	}

	.goods-comment-box .comment-images .image-preview:nth-child(3n+0) {
		margin-right: 0;
	}

	.goods-comment-box .comment-images .image-preview image {
		display: block;
		width: 220upx;
		height: 220upx;
	}

	/* 没有更多 */

	.no-more {
		text-align: center;
		color: #737373;
		padding: 10px 0;
	}
</style>
